<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>拖拽</title>
  <script src="../js/jquery-ui-1.13.1/external/jquery/jquery.js"></script>
  <script src="../js/jquery-ui-1.13.1/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="../js/jquery-ui-1.13.1/jquery-ui.min.css">
  <style type="text/css">
    #resizable {
      width: 200px;
      height: 150px;
      padding: 5px;
    }

    #resizable h3 {
      text-align: center;
      margin: 0;
    }

    #sortableBOx {
      width: 360px;
      display: flex;
      flex-wrap: wrap;
    }

    .boxDiv {
      width: 100px;
      height: 100px;
      background-color: #e9e9e9;
      text-align: center;
      line-height: 100px;
      font-size: 22px;
      margin: 10px;
    }

    ul.sortable {
      width: 400px;
      margin: 0 auto;
    }

    ul.sortable li {
      list-style: none;
      margin-bottom: 15px;
      border: 1px solid #333;
      cursor: pointer;
    }

    .move {
      height: 40px;
      background: #fff;
      line-height: 40px;
      padding: 0 15px;
      font-size: 14px;
    }

    .moved {
      cursor: pointer;
    }

  </style>
</head>

<body>
  <div>
    <ul id="sortable">
      <li class="ui-state-default">1</li>
      <li class="ui-state-default">2</li>
      <li class="ui-state-default">3</li>
      <li class="ui-state-default">4</li>
      <li class="ui-state-default">5</li>
      <li class="ui-state-default">6</li>
      <li class="ui-state-default">7</li>
      <li class="ui-state-default">8</li>
      <li class="ui-state-default">9</li>
      <li class="ui-state-default">10</li>
      <li class="ui-state-default">11</li>
      <li class="ui-state-default">12</li>
    </ul>
  </div>
  <hr>
  <h3>开关控制拖拽（可保存拖拽结果）</h3>
  <input type="button" name="开启拖拽" value="开启拖拽" id="open" /> <input type="button" name="关闭" value="关闭拖拽"
    id="close" /><input type="button" name="刷新页面" value="刷新页面" id="refresh" />

  <div id="sortableBOx">
    <div class="boxDiv" id="boxDiv1">1</div>
    <div class="boxDiv" id="boxDiv2">2</div>
    <div class="boxDiv" id="boxDiv3">3</div>
    <div class="boxDiv" id="boxDiv4">4</div>
    <div class="boxDiv" id="boxDiv5">5</div>
    <div class="boxDiv" id="boxDiv6">6</div>
    <div class="boxDiv" id="boxDiv7">7</div>
  </div>
  <hr>
  <div>
    <div class="container">

      <ul class="sortable">
        <h3>拖拽栏目进行排序 ↑↓（可保存拖拽结果）</h3>
        <li id="draggable2" class="drag">
          <div class="innerdiv">
            <div class="innerdiv2">
              <div class="move">◉ 协会动态</div>
            </div>
          </div>
        </li>
        <li id="draggable3" class="drag">
          <div class="innerdiv">
            <div class="innerdiv2">
              <div class="move">◉ 图片新闻</div>
            </div>
          </div>
        </li>
        <li id="draggable4" class="drag">
          <div class="innerdiv">
            <div class="innerdiv2">
              <div class="move">◉ 新闻资讯</div>
            </div>
          </div>
        </li>
        <li id="draggable5" class="drag">
          <div class="innerdiv">
            <div class="innerdiv2">
              <div class="move">◉ 行业资讯</div>
            </div>
          </div>
        </li>
        <li id="draggable6" class="drag">
          <div class="innerdiv">
            <div class="innerdiv2">
              <div class="move">◉ 行业服务</div>
            </div>
          </div>
        <li id="draggable1" class="drag">
          <div class="innerdiv">
            <div class="innerdiv2">
              <div class="move">◉ 战略伙伴</div>
            </div>
          </div>
        </li>
        </li>
      </ul>
    </div>
  </div>
  <script type="text/javascript">
    $(function () {

      $("#sortable").sortable();
      $("#sortable").disableSelection();

      var localStr = localStorage.sortableBOx;
      //如果有localst记录则，按照这个进行排序元素
      if (localStr) {
        var resArrBox = localStr.split(',');
        var resUlBox = $('#sortableBOx');
        //li 数组
        for (var i = 0; i < resArrBox.length; i++) {
          resUlBox.append($("#" + resArrBox[i]));
        }
      }

      $(document).ready(function () {
        $("#open").click(function () {
          $(".boxDiv").addClass("moved")
          $("#sortableBOx").sortable({
            opacity: 0.5,
            placeholder: "ui-state-highlight",
            beforeStop: function (event, ui) {
              console.log("beforeStop event", event)
              console.log("beforeStop ui", ui)
              let arr = $("#sortableBOx").sortable('toArray');
              arr = arr.filter(function (s) {
                return s && s.trim();
              });
              console.log(arr);
              //拖拽后利用localStorage记录顺序
              localStorage.sortableBOx = arr;
            }
          }, {
            change: function (event, ui) {
              console.log("change event", event)
              console.log("change ui", ui)

            }
          }).disableSelection();
        })

        $("#close").click(function () {
          $("#sortableBOx").sortable("destroy");
          $(".boxDiv").removeClass("moved")
        })

        $("#hui").click(function () {
          $("#sortableBOx").sortable("cancel");
        })

        $("#refresh").click(function () {
          window.location.reload();
        })

      });

      /**
       **  保存本地
       **/
      var arr = '';
      var sort = $(".sortable").sortable({
        handle: ".move",
        cursor: 'move',
        revert: true,
        stop: function () {
          //记录sort后的id顺序数组
          var arr = $(".sortable").sortable('toArray');
          arr = arr.filter(function (s) {
            return s && s.trim();
          });
          console.log(arr);
          //拖拽后利用localStorage记录顺序
          localStorage.arr = arr;
        }
      });
      var localSt = localStorage.arr;
      //如果有localst记录则，按照这个进行排序元素
      if (localSt) {
        var resArr = localSt.split(',');
        var resUl = $('.sortable');
        //li 数组
        for (var i = 0; i < resArr.length; i++) {

          resUl.append($("#" + resArr[i]));
        }
      }
    });

  </script>
</body>

</html>
